<header class="ncl-main-header">
    <div class="main-header-section">
        <div class="main-header-title-wrapper">
            <ncl-breadcrumbs-data-wrapper></ncl-breadcrumbs-data-wrapper>
        </div>
        <div data-ng-if="$ctrl.isStagingMode()" class="languages-dropdown">
            <form name="$ctrl.translationForm">
                <igz-default-dropdown class="no-selected-option-style"
                                      data-name-key="attr.lang"
                                      data-values-array="$ctrl.languages"
                                      data-selected-item="$ctrl.selectedLanguage"
                                      data-item-select-callback="$ctrl.onLanguageChange(item, isItemChanged)"
                                      data-item-select-field="attr.id"
                                      data-form-object="$ctrl.translationForm"
                                      data-input-name="languageName"
                                      data-placeholder="{{ 'common:PLACEHOLDER.DEFAULT_LANGUAGE' | i18next }}">
                </igz-default-dropdown>
            </form>
        </div>
    </div>

    <igz-navigation-tabs class="igz-component"
                         data-ng-if="$ctrl.navigationTabsConfig.length > 0"
                         data-tab-items="$ctrl.navigationTabsConfig">
    </igz-navigation-tabs>
</header>

<div class="header-expansion-button"
     data-ng-click="$ctrl.onToggleHeader()"
     data-uib-tooltip="{{ ($ctrl.isHeaderExpanded ? 'common:TOOLTIP.CLOSE_HEADER' : 'common:TOOLTIP.OPEN_HEADER') | i18next }}"
     data-tooltip-popup-delay="500"
     data-tooltip-placement="bottom">
    <div class="expansion-icon {{$ctrl.isHeaderExpanded ? 'igz-icon-up' : 'igz-icon-down'}}"></div>
</div>
